<template>
  <div ref="container">
    <a-modal
      :title="title"
      :width="width"
      :visible="visible"
      :getContainer="() => $refs.container"
      :maskStyle="{ top: '93px', left: '154px' }"
      :wrapClassName="wrapClassNameInfo()"
      :mask="isDesktop()"
      :maskClosable="false"
      :style="modalStyle"
      @cancel="handleCancel"
      cancelText="关闭"
    >
      <template slot="footer">
        <a-button v-print="'#printData'">打印</a-button>
        <a-button key="back" @click="handleCancel">取消</a-button>
      </template>
      <a-form>
        <template>
          <div id="printData" class="print-content">
            <div class="print-body">
              <div class="company-name">{{ formObj.companyName }}</div>
              <div class="companyAddress-companyTel">
                <span>地址：{{ formObj.companyAddress }}</span>
                <span style="margin-left: 16px">电话:{{ formObj.companyTel }}</span>
              </div>

              <div class="order-name">{{ formObj.orderName }}</div>
              <div class="cus-date">
                <span>客户：{{ formObj.organName }}</span> <span>日期：{{ formObj.operTimeStr }}</span>
              </div>
              <div class="address">
                <div><span>地址：</span><span style="width: 50vw">{{ formObj.address }}</span></div>
                <div>NO：{{ formObj.companyPostCode }}</div>
              </div>
              <div class="prd-info">
                <div class="bottom-list">
                  <div class="list-title">
                    <div v-for="(el, i) in columns" :key="i" class="t-b-1" :style="{ width: el.width }">{{ el.title }}</div>
                  </div>
                  <div class="list-data" v-for="(e, k) in dataSource" :key="k">
                    <template>
                      <div
                        :class="'t-b-2'"
                        :style="{ width: el.width }"
                        v-for="(el, j) in columns"
                        :key="j + k"
                      >
                        {{ el.key === 'id' ? k + 1 : e[el.key] }}
                      </div>
                    </template>
                  </div>
                </div>
                <div class="delivery-info">
                  <span>发货人：{{ formObj.companyContacts }}</span>
                  <span>送货车号：{{ formObj.carNo }}</span>
                  <span>收货人：{{ formObj.receiptor }}</span>
                </div>
              </div>
              <div class="tip-info">
                <div>
                  特别说明：
                </div>
                <div>
                  <div>1、本送货单由收货单位经办人签字后作为收款依据。</div>
                  <div>2、收货单位如无采购合同，此送货单将代为购销合同。</div>
                  <div>3、如有品质问题请在收到货后三日内提出，过期视为合格。</div>
                </div>
              </div>
            </div>
            <div class="side-text">
              {{ formObj.sideText }}
            </div>
          </div>
        </template>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import { getCurrentSystemConfig } from '@/api/api'

export default {
    name: 'PrintForm',
    mixins: [mixinDevice],
    data () {
        return {
            title: '打印预览',
            width: '1000px',
            visible: false,
            modalStyle: '',
            billPrintUrl: '',
            height: '',
            model: {},
            loading: false,
            printContent: {
                id: 'printDiv',
                // preview: true, // 预览工具是否启用
                // previewTitle: '', // 预览页面的标题
                popTitle: '' // 打印页面的页眉
            },
            formObj: {
                companyName: '',
                companyAddress: '',
                companyTel: '',
                orderName: '送货单',
                companyPostCode: '',
                saleAgreement: '',

                organName: '',
                operTimeStr: '',

                address: '',
                receiptName: '',
                receiptTel: '',
                carNo: '',
                receiptor: '',
                sideText: '白联 ： 存根红联 ： 客户黄联 ： 回单蓝联 ： 结账'
            },
            // 序号 订单 货品编号 品名 项目 版本 单位 数量 备注
            columns: [
                { title: '序号', key: 'id', width: '5%' },
                { title: '订单', key: 'orderId', width: '15%' },
                { title: '货品编号', key: 'prdId', width: '20%' },
                { title: '品名', key: 'prdName', width: '25%' },
                { title: '项目', key: 'project', width: '5%' },
                { title: '版本', key: 'version', width: '5%' },
                { title: '单位', key: 'unit', width: '5%' },
                { title: '数量', key: 'num', width: '8%' },
                { title: '备注', key: 'note', width: '13%' }
            ],
            dataSource: []
        }
    },
    created () {
    },
    methods: {
        show (record, billPrintUrl, billPrintHeight, dataSource, orderInfo) {
            this.height = billPrintHeight
            this.billPrintUrl = billPrintUrl
            this.visible = true
            this.modalStyle = 'top:20px;height: 95%;'
            this.model = Object.assign({}, record)

            this.formObj.organName = orderInfo.organName || ''
            this.formObj.operTimeStr = orderInfo.operTimeStr || ''
            this.formObj.address = orderInfo.address || ''

            const list = dataSource.slice(0, dataSource.length - 1)
            this.dataSource = list.map(item => {
                return {
                    id: item.id,
                    orderId: orderInfo.number || '',
                    prdId: item.barCode,
                    prdName: item.name,
                    project: item.project || '',
                    version: item.version,
                    unit: item.unit,
                    num: item.operNumber
                }
            })
        },
        handleCancel () {
            this.close()
        },
        close () {
            this.billPrintUrl = ''
            this.$emit('close')
            this.visible = false
            this.modalStyle = ''
        },
        getConfigInfo () {
            getCurrentSystemConfig().then((res) => {
                if (res.code === 200 && res.data) {
                    const item = res.data
                    this.formObj.companyName = item.companyName || ''
                    this.formObj.companyAddress = item.companyAddress || ''
                    this.formObj.companyTel = item.companyTel || ''
                    this.formObj.companyPostCode = item.companyPostCode || ''
                    // this.formObj.saleAgreement = item.saleAgreement || ''
                    this.formObj.companyContacts = item.companyContacts || ''
                }
            })
        },
        isSpecialField (item) {
            return ['project', 'version', 'unit'].includes(item)
        }

    }
}
</script>

<style scoped>
@page {
  size: auto;
  margin: 0mm;
}

.bottom-list {
  min-height: 280px;
}

.t-b-1 {
  height: 40px;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
}
.t-b-2 {
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-weight: 400;
}

.print-content {
  position: relative;
  margin-left: 10px;
  margin-right: 20px;
  padding-right: 14px;
  font-weight: 600;
  color: #000;
}

.company-name {
  text-align: center;
  font-size: 25px;
  margin-top: 12px;
}

.companyAddress-companyTel {
  text-align: center;
  font-size: 12px;
}

.order-name {
  text-align: center;
  font-size: 20px;
  letter-spacing: 35px;
}

.address {
  display: flex;
  justify-content: space-between;
}

.cus-date {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}

.companyAddress {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
}

.prd-info {
  border: 2px solid #000;
  margin: 0 auto;
  margin-top: 10px;
}

.list-title {
  display: flex;
  justify-content: center;
}

.list-data {
  display: flex;
  justify-content: center;
}

.delivery-info {
  display: flex;
  justify-content: space-evenly;
}

.side-text {
  position: absolute;
  display: flex;
  width: 0px;
  top: 50px;
  right: 0px;
}

.tip-info {
  display: flex;
  margin-left: 70px;
}
</style>
